<!DOCTYPE html>
{% load static category %}
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>{% block title %}我的博客，基于Django实现{% endblock %}</title>
	<link rel="stylesheet" href="{% static 'users/bulma.css' %}">
	<style>
		/* 自定义样式，基于 Bulma */
		.navbar {
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		}

		.navbar-item:hover {
			background-color: #f5f5f5 !important;
		}

		.box {
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			border: 1px solid #e9ecef;
			border-radius: 8px;
			margin-bottom: 1.5rem;
		}

		.box:hover {
			transform: translateY(-5px);
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		}

		.pagination-link.is-current {
			background-color: #3273dc !important;
			border-color: #3273dc !important;
		}

		.sidebar-box {
			background-color: #f8f9fa;
			border-left: 4px solid #3273dc;
			padding: 1.5rem;
			margin-bottom: 1.5rem;
			border-radius: 8px;
		}

		.sidebar-box .title {
			font-size: 1.25rem;
			font-weight: 600;
			color: #3273dc;
		}

		.footer {
			background-color: #f8f9fa;
			padding: 2rem 1.5rem;
			margin-top: 2rem;
			box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
		}

		.footer a {
			color: #3273dc;
		}

		.footer a:hover {
			color: #363636;
		}

	</style>
</head>

<body>

	<!-- 导航栏 -->
	<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
		<div class="container">
			<div class="navbar-brand">
				<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
					<span aria-hidden="true"></span>
					<span aria-hidden="true"></span>
					<span aria-hidden="true"></span>
				</a>
			</div>

			<div id="navbarBasicExample" class="navbar-menu">
				<div class="navbar-start">
					{% block navbar-start %}
					<a class="navbar-item is-active" href="/">
						首页
					</a>

					{% for category in category_list %}
					<a class="navbar-item" href="{% url 'blog:category_list' category.id %}">
						{{ category.name }}
					</a>
					{% endfor %}
					{% endblock %}
				</div>

				<div class="navbar-end">
					{% block navbar-end %}
					<div class="navbar-item">
						{% if user.is_authenticated %}
						<div class="buttons">
							<a class="button is-primary" href="{% url 'users:user_info' %}" target="_blank">
								<strong> {{ request.user.username }}</strong>
							</a>
							<a href="{% url 'users:logout' %}" class="button is-primary">退出</a>
						</div>
						{% else %}
						<div class="buttons">
							<a class="button is-primary" href="{% url 'users:register' %}" target="_blank">
								<strong>注册</strong>
							</a>
							<a class="button is-light" href="{% url 'users:login' %}" target="_blank">
								登录
							</a>
						</div>
						{% endif %}
					</div>
					{% endblock %}
				</div>
			</div>
		</div>
	</nav>

	<!-- 主体内容 -->
	<section class="section">
		<div class="container">
			<div class="columns">
				<!-- 主内容区域 -->
				<div class="column is-7">
					{% block section %}
					{% block archives %}{% endblock %}

					{% if page_obj %}
					{% for post in page_obj %}
					<div class="box">
						<h1 class="is-size-5 has-text-weight-bold">
							<a href="{% url 'blog:post_detail' post.id %}"> {{ post.title }}</a>
						</h1>
						<div class="is-size-7 has-text-grey-light pt-1 pb-1">
							<span class="mr-3">作者：{{ post.owner.username }}</span> <span>发布日期：{{ post.add_date }}</span>
                            <span>访问量：{{ post.pv }}</span>
						</div>
						<p class="mt-3">{{ post.desc|truncatechars:50 }}</p>
					</div>
					{% endfor %}
					{% else %}
					<div class="box">
						<p class="has-text-danger">文章不存在！</p>
					</div>
					{% endif %}

					{% if page_obj %}
					<nav class="pagination is-centered" role="navigation" aria-label="pagination">
						{% if page_obj.has_previous %}
						<a class="pagination-previous" href="?page={{ page_obj.previous_page_number }}">Previous</a>
						{% endif %}
						{% if page_obj.has_next %}
						<a class="pagination-next" href="?page={{ page_obj.next_page_number }}">Next page</a>
						{% endif %}
						<ul class="pagination-list">
							{% if page_obj.has_previous %}
							<li><a class="pagination-link" aria-label="Goto page 45"
									href="?page={{ page_obj.previous_page_number }}">{{ page_obj.previous_page_number }}</a></li>
							{% endif %}
							<li><a class="pagination-link is-current" aria-label="Page {{ page_obj.number }}"
									aria-current="page" href='?page={{ page_obj.number }}'>{{ page_obj.number }}</a></li>
							{% if page_obj.has_next %}
							<li><a class="pagination-link" href="?page={{ page_obj.next_page_number }}"
									aria-label="Goto page {{ page_obj.next_page_number }}">{{ page_obj.next_page_number }}</a></li>
							{% endif %}
						</ul>
					</nav>
					{% endif %}
					{% endblock %}
				</div>

				<!-- 右侧侧边栏 -->
				<div class="column is-5">
					{% block right %}
					{% get_sidebar_list as sidebar_list %}
					{% for sidebar in sidebar_list %}
					<div class="sidebar-box">
						<h1 class="title">{{ sidebar.title }}</h1>
						<p>{{ sidebar.get_content|safe }}</p>
					</div>
					{% endfor %}
					{% endblock %}
				</div>
			</div>
		</div>
	</section>

	<!-- 页脚 -->
	{% block footer %}
	<footer class="footer">
		<div class="content has-text-centered">
			<p>
				<strong>我的博客</strong> 基于Django构建。© 2025 mbh and wyh 版权所有
			</p>
		</div>
	</footer>
	{% endblock %}

</body>

</html>